{% extends "index/index.html" %}

{% block content %}
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Wachtag</h1>
    <p class="lead">Wähle die heutigen Wachgänger*innen:
    <sup><i class="far fa-question-circle"  data-toggle="tooltip" data-placement="top" title="Es fehlt ein*e Wachgägner*in? Frage einen Wachleiter, ob er sie/ihn hinzufügt!"></i></sup>
    </p>
    
    <form action="{% url 'crew:addWachtag' %}" method="post">
        {% csrf_token %}
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            {% for user in users %}
                <label class="btn btn-secondary">
                    <input type="checkbox" name="wachtagUsers" autocomplete="off" value="{{ user.username }}"> {{ user.username }}
                </label>
            {% endfor %}
        </div>
        <button type="submit" class="btn btn-primary">Bestätigen</button>
    </form>
    <!--JS check hinzufügen damit nicht immer gereloadet wird bei einem Fehler, und die Auswahl persistent bleibt-->
    {% if error_message %}
    <br>
    <div class="alert alert-{{ alert_box_level }}" role="alert">
        {{ error_message }}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}
